<template>
  <div>
    <p>商品数量：{{ count }}</p>
    <button v-on:click="count += 1">少量代码</button>
    <button v-on:click="addFn">methods里的函数名</button>
    <button v-on:click="addCountFn(5)">加5件</button>
    <button @click="btn">事件绑定简化写法@，减1件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0, //商品数量
    };
  },
  methods: {
    addFn() {
      this.count++; //变量虽然在data函数内，但是最后都会挂载到export default后面{}对象身上
      //this指向的就是{}对象，所以可以直接访问count变量
    },
    addCountFn(num) {
      this.count += num;
    },
    btn() {
      this.count--;
    },
  },
};
</script>

<style>
</style>

